<template>
  <div class="item">
    <input
      type="checkbox"
      :checked="item.status === FINISHED"
      @click="setStatus(item.id)"
    />
        <span :class="item.status === FINISHED ? 'line-through' : ''" id="content">
            {{ item.content }}
        </span>
        <br>
        <span class="button">
            <button
            v-if="item.status !== FINISHED"
            @click="setDoing(item.id)"
            :class="item.status === DOING ? 'doing' : 'whiledo'"
          >
            {{ item.status === DOING ? "正在做..." : "马上做..." }}
          </button>
          <button class="deletetodo" @click="removeTodo(item.id)"><img src="../../assets/delete.png" alt=""></button>
        </span>
  </div>
</template>

<script lang="ts">
import { ITodo, TODO_STATUS } from "@/typing";
import { defineComponent, PropType } from "vue";

interface IStatusState {
  DOING: TODO_STATUS;
  FINISHED: TODO_STATUS;
  WILLDO: TODO_STATUS;
}
export default defineComponent({
  name: "TodoItem",
  props: {
    item: Object as PropType<ITodo>
  },
  setup(props, { emit }) {
    const statusState: IStatusState = {
      DOING: TODO_STATUS.DOING,
      FINISHED: TODO_STATUS.FINISHED,
      WILLDO: TODO_STATUS.WILLDO
    };

    const removeTodo = (id: number): void => {
      emit("removeTodo", id);
    };

    const setDoing = (id: number): void => {
      emit("setDoing", id);
    };

    const setStatus = (id: number): void => {
      emit("setStatus", id);
    };
    return {
      ...statusState,
      removeTodo,
      setDoing,
      setStatus
    };
  }
});
</script>

<style>
.line-through {
  text-decoration: line-through;
}
.doing {
    outline: none;
    border: 1px solid #f4ff00;
    border-radius: 10px;
    margin-left: 5px;
    background-color: #f4ff00;
    color: #f00;
    cursor: pointer;
}
.whiledo {
    outline: none;
    border: 1px solid #00ff55;
    margin-left: 5px;
    border-radius: 10px;
    background-color: #00ff55;
    color: #fff;
    cursor: pointer;
}
.item {
  width: 90%;
  border-radius: 10px;
  background-color: rgba(255,255,255,0.1);
  color: #2b2f4a;
  margin: 30px 15px;
  line-height: 30px;
  box-shadow: 20px 20px 50px rgba(0,0,0,0.05);
  font-size: 16px;
  word-wrap: break-word;
  border-top: rgba(255,255,255,0.5) 1.5px solid;
  border-left: rgba(255,255,255,0.5) 1.5px solid;
  backdrop-filter: blur(5px);
}
.deletetodo{
   outline: none;
   border: none;
   background: #fbfbfb;
   margin-left: 220px;
   cursor: pointer;
}
</style>

